<script setup>
import axios from "axios";
import * as echarts from "echarts";
import {markRaw, onMounted, ref} from "vue";

const pie = ref()
const myChart = ref()
const option = ref({})
const data = ref()
const init = async () => {
  await axios.get('http://127.0.0.1:5000/pie').then(res => {
    data.value = res.data
  })
  myChart.value = markRaw(echarts.init(pie.value));
  draw();
}
const draw = () => {
  option.value = {
    baseOption: {
      timeline: {
        //loop: false,
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 3000,
        data: data.value.year
      },
      title: {
        text: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{b}:{c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: '5%',
        textStyle:{
          color:'#ffffff'
        },
        top:'4%'
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    },
    options: data.value.data.map((value,index) => {
      return {
        series: {
          name: data.value.year[index],
          data: value,
        }
      }
    })
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})

</script>

<template>
  <div class="pie" ref="pie"></div>
</template>

<style scoped>
.pie {
  width: 100%;
  height: 100%;
}
</style>